<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
        }
    </style>
</head>

<body>
    <!-- 1. 内联JS绑定事件    点击元素时,将"" 作为JS语句执行 -->
    <!-- <div class="box" onclick="alert(11111)"></div>
    <div class="box" onclick="fn()"></div> -->

    <div class="box"></div>

    <button class="btn">清除</button>
</body>
<script>

    // JS中给一个元素清除绑定事件的方法:
    // 1. 内联JS绑定事件   清除->  ele.removeAttribute("onclick")
    // 2. DOM一级事件(通过赋值式绑定事件)   =>  赋值为null  box.onclick = null
    // 3. DOM二级事件(事件监听 W3C新增绑定事件的方法)   => 优点: 可以给一个元素绑定多个相同类型的事件

    // 添加事件监听
    // ele.addEventListener(eventType, callback, useCapture);
    // ele        绑定事件的元素
    // eventType  绑定事件的类型 (不加on  -> click dblclick mousedown)
    // callback   事件触发时执行的函数(回调函数 -> 将一个函数作为参数,传入到addEventListener)
    // useCapture  xxx

    // 删除事件监听
    // ele.removeEventListener(eventType, callback, useCapture);
    // ele        绑定事件的元素
    // eventType  绑定事件的类型 (不加on  -> click dblclick mousedown)
    // callback   事件触发时执行的函数(回调函数 -> 将一个函数作为参数,传入到addEventListener)
    // useCapture  xxx

    // 注意: 对应函数的引用清除

    // DOM一级事件(通过赋值式绑定事件)
    // var box = document.getElementsByClassName("box")[0];
    // box.onclick = function () {
    //     alert(666);
    // }
    // box.onclick = function () {
    //     alert(777);
    // }

    // box.onclick = null


    // 3. DOM二级事件
    var box = document.getElementsByClassName("box")[0];
    var btn = document.getElementsByClassName("btn")[0];

    // box.addEventListener("click", function () {
    //     alert(666);
    // })

    // box.addEventListener("click", function () {
    //     // 事件监听中 this -> 绑定事件的元素 (IE有问题 -> window)
    //     this.style.backgroundColor = randColor();
    // })


    function alertMsg() {
        alert(666);
    }
    function changeColor() {
        // 事件监听中 this -> 绑定事件的元素 (IE有问题 -> window)
        this.style.backgroundColor = randColor();
    }
    box.addEventListener("click", alertMsg);
    box.addEventListener("click", changeColor);



    btn.onclick = function () {
        console.log("清除事件");
        box.removeEventListener("click", alertMsg);
        box.removeEventListener("click", changeColor);
    }






    function randColor() {
        var str = "0123456789abcdef";
        var colorStr = "#";
        for (var i = 0; i < 6; i++) {
            var index = Math.floor(Math.random() * str.length);
            var char = str.charAt(index);
            colorStr += char;
        }
        return colorStr;
    }























    function fn() {
        alert("注意防护");
    }


</script>

</html>